<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/chivoxsdk.css">
    <link rel="stylesheet" href="assets/css/chivox-example.css">
    <style>
        #changeParams input,#changeParams select{
            width: 173px;
            height: 30px;
        }
    </style>
</head>
<body>
<div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <p class="navbar-text">CHIVOX API JSSDK</p>
                <ul class="nav nav-pills">
                    <li><a href="index.html">首页</a></li>
                    <li><hr/></li>
                    <li class="active"><a href="index.html">基础应用场景</a></li>
                    <li><hr/></li>
                    <li><a href="player_tts.html">音频合成</a></li>
                    <li><hr/></li>
                    <li><a target="_blank" href="../doc/index.html">SDK接口文档</a></li>
                </ul>
            </div>
            <div class="content">
                <div class="chivoxpanel">
                    <div class="list">
                        <img class="icon" src="assets/img/eval.png"></img>
                        <p class="title">基础应用场景</p>
                        <ul>
                            <li ><a href="index.html">英文句子评测</a></li>
                            <li><a href="player_tts.html">音频合成</a></li>
                            <li > <a href="aiPanel.html">aiPanel</a></li>
                            <li class="active"> <a href="en_pred_exam.html">en_pred_exam</a></li>
                        </ul>
                    </div>
                    <div class="mainarea">
                        <p class="title">英文句子评测</p>
                        <textarea name="refText" id="currentWord" cols="90" rows="4"></textarea>
                        <div id="changeParams" style="line-height: 60px;">
                            <div>
                                coreType:<select name="coreTypes" id="coreType">
                                <!--<option value ="volvo"></option>-->
                            </select>
                                res:<select name="ress" id="res"></select>
                                userId: <input id="userId" type="text" value="chivox tester">
                            </div>

                        </div>
                        <div id="aiPanel" class="aiPanel">
                            <div>
                                <button class="play playOff"></button>
                                <button class="record recordOff"></button>
                                <button class="replay replayOff"></button>
                                <button class="changeWordButton">换个句子</button>
                                <div class="recordProgressBar"><div class="value"></div></div>
                            </div>
                            <div id="chivox-recorder"></div>
                        </div>
                        <!--  设置回放音量：<input type="range" min="0" max="100" id="inputButton">
                          获取录音音量：<input type="range" min="0" max="100" id="getMicButton">
                          设置录音音量：<input type="range" min="0" max="100" id="setMicButton">-->
                        <p class="scoreTitle">得分情况</p>
                        <p id="scoreResult">
                            发音得分：<span class="pron"></span>
                            <br/>
                            流利度：<span class="fluency"></span>
                            <br/>
                            详细得分：<span class="details"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="../dist/chivox.umd.js"></script>
<script>
    $(function () {
        var config = getConfig();
        var coreTypeD = null;
        if(Object.keys(config).length >0){
            coreTypeD = Object.keys(config);
            setConfig(coreTypeD,"#coreType");
            setConfig(config[$("#coreType").val()].res,"#res");
        }

        $("#changeParams #coreType").on("change input",function () {
            setConfig(config[$("#coreType").val()].res,"#res");
        });
        let refText = "So, you have to guide a foreign couple you know around Tokyo. How about going to Sensoji Temple in Asakusa? They prefer pop culture over traditional culture? Maybe you should take them to Shibuya or Harajuku instead. The Shibuya Scramble Crossing in Shibuya is definitely a muse-see. It's an iconic landmark in Tokyo, much like New York City's Statue of Liberty, or Beijing's Great Wall. The crossing is just outside Shibuya station and a lot of people walk in all directions.";

            $("#currentWord").val(refText);

        var aipanel = new AiPanel(
            {
                appKey: '14255202120000cf',
                sigurl: '../php/sig.php',
                playDing: true,
                data: {
                    playPosition: 1000,
                    playDuration: 2000,
                    audioUrl: "/static/I-want-to-know-the-past-and-present-of-Hong-Kong.mp3", //音频URL
                    serverParams: {
                       refText:refText,
                        rank: 100,
                        userId: "chivox tester",
                        coreType: "en.pred.exam",
                        precision: 1,
                        attachAudioUrl:1,
                        client_params: {
                            ext_subitem_rank4: 0, ext_word_details: 1, ext_cur_snt: 1
                        }
                    }
                },
                onInit: function onInit(errno) {
                    console.info('[ onInit ]:', errno);
                },
                onInitSuccess: function onInitSuccess() {
                    console.log("onInitSuccess");
                },
                onError: function onError(err) {
                    console.info('[ onError ]:', err);
                },
                onBeforeRecord: function onBeforeRecord() {
                    $("#scoreResult .pron").empty();
                    $("#scoreResult .fluency").empty();
                    $("#scoreResult .details").empty();
                },
                onRecordIdGenerated:function (id) {
                    console.log("=============onRecordIdGenerated start=============");
                    console.log(JSON.stringify(id));
                    console.log("=============onRecordIdGenerated end=============");
                },
                onAfterRecord:function(){
                    console.log("onAfterRecord")
                },
                onScore: function onScore(data) {

                    $("<pre>").text(JSON.stringify(data,null, 4)).appendTo("#scoreResult .details");

                },
                onInternalScore:function(data){
                    console.log(data);

                },
                onScoreError: function onScoreError(errorType) {
                    //评分失败的显示 "TIMEOUT", "NO_DATA", ErrorID
                    $("<pre>").text(JSON.stringify(errorType,null, 4)).appendTo("#scoreResult .details");
                },
                onBeforePlay:function(){
                    console.log("onBeforePlay")
                },
                onAfterPlay:function(){
                    console.log("onAfterPlay");
                },
                onBeforeReplay:function(){
                    console.log("onBeforeReplay")
                },
                onAfterReplay: function onAfterReplay() {
                    console.log("onAfterReplay");
                }
            }
        );

        $("#currentWord").get(0).addEventListener("input",function () {
            console.log("change");
            aipanel.setData({
                playPosition: 0,
                playDuration: 6000,
                audioUrl: "/static/I-want-to-know-the-past-and-present-of-Hong-Kong.mp3", //音频URL
                serverParams: {
                    coreType:  $("#coreType").val(),
                    refText:$("#currentWord").val(),
                    rank: 100,
                    userId: "tester"
                }
            })
        });

        $(".changeWordButton").bind("click",function () {
            console.log(aipanel);
            aipanel.dispose();
            console.log(aipanel);
            aipanel = null;
            console.log(aipanel)
        });

        function getConfig() {
            var data = null;
            $.ajax({
                url: "./config/config.json",
                type: 'GET',
                dataType: 'json',
                async: false,
                success: function (result) {
                    data = result;
                    console.log(result)
                },
                error:function(err) {
                    alert("get config.json  fail:"+err)
                }
            });
            return data;
        }

        function setConfig(data,doms) {
            var str = "";
            if(data){
                for (var i = 0;i<data.length;i++){
                    str+="<option value ="+data[i]+">"+data[i]+"</option>"
                }
            }
            $(doms).html(str);
        }
    })
</script>
</body>
</html>